import * as React from 'react'
// import Authentication from '../../router/Authentication'
export interface Props {
  languageName: string,
  enthusiasmLevel?: number
  onIncrement?: () => void
  onDecrement?: () => void
}
export interface State {
  age: number
}
function Bello({ languageName, enthusiasmLevel = 1 }: Props) {
  if (enthusiasmLevel <= 0) {
    throw new Error('You could be a little more enthusiastic. :D')
  }
  return (
    <div className="hello">
      <div className="greeting">
        Hello {languageName}{enthusiasmLevel}
      </div>
    </div>
  )
}
// @Authentication
class Hello extends React.Component<Props, State> {
  state = {
    age: 1
  }
  public render() {
    const { languageName, enthusiasmLevel, onIncrement, onDecrement} = this.props
    return (
      <div className="App">
        <p className="App-intro">
          <button onClick={onDecrement}>-</button>{enthusiasmLevel}<button onClick={onIncrement}>+</button>
        </p>
        <Bello 
          languageName={languageName}
          enthusiasmLevel={enthusiasmLevel}/>
      </div>
    )
  }
}
export default Hello
